<template>
  <view class="content">
    <!-- 搜索框开始 -->
    <view class="header">
      <view class="title" @click="toLoginPage"> 登录 </view>
      <view class="search" @click="onToSearchPage">
        <uni-search-bar radius="999" bgColor="#e5e5e5" cancelButton="none" placeholder="搜索"> </uni-search-bar>
      </view>
      <view class="right-icon" @click="onToSearchPage">
        <button class="mini-btn" type="primary" size="mini">搜索</button>
      </view>
    </view>
    <!-- 搜索框结束 -->
    <scroll-view class="scroll" lower-threshold="20" scroll-y="true" @scrolltolower="scrollLower">
      <!-- 轮播图开始 -->
      <view class="banner">
        <swiper class="swiper" circular indicator-dots autoplay indicator-color="#3B302F" indicator-active-color="#1A5276">
          <swiper-item>
            <view class="swiper-item">
              <image class="swiper-pic" src="https://img1.youlu.net/pic/flash/202305271113211321.jpg" mode="" />
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"><image class="swiper-pic" src="https://img1.youlu.net/pic/flash/202205261355325532.jpg" mode="" /></view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"><image class="swiper-pic" src="https://img1.youlu.net/pic/flash/20220426170845845.jpg" mode="" /></view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"><image class="swiper-pic" src="https://img1.youlu.net/pic/flash/202103040857425742.jpg" mode="" /></view>
          </swiper-item>
          <swiper-item>
            <view class="swiper-item"><image class="swiper-pic" src="https://img1.youlu.net/pic/flash/202103041547564756.jpg" mode="" /></view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 轮播图结束 -->
      <!-- 书籍分类开始 -->
      <view class="category-list">
        <view class="category-item" v-for="item in categoryList" :key="item.id">
          <view class="category-pic">
            <image class="category-img" :src="item.url" mode="widthFix" />
          </view>
          <view class="category-title"> {{ item.name }} </view>
        </view>
      </view>
      <!-- 书籍分类结束 -->
      <!-- 推荐商品开始 -->
      <view class="recommend-content">
        <view class="recommend-title"> 推荐商品 </view>
        <view class="recommend-product">
          <view class="product-left-list">
            <view class="product-item" v-for="item in 4" :key="item">
              <view class="product-pic">
                <image src="http://127.0.0.1:8000/static/web/自然科学.jpg" mode="widthFix" :lazy-load="true" />
              </view>
              <view class="product-desc"> 有声小说 </view>
            </view>
          </view>
          <view class="product-right-list">
            <view class="product-item" v-for="item in 4" :key="item">
              <view class="product-pic">
                <image src="http://127.0.0.1:8000/static/web/金融科技.jpg" mode="widthFix" :lazy-load="true" />
              </view>
              <view class="product-desc"> 有声小说 </view>
            </view>
          </view>
        </view>
        <view class="no-more"> —— 只有这么多了 —— </view>
      </view>
      <!-- 推荐商品结束     -->
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { UserTypes } from '@/store/actions_types/actions_types'
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      categoryList: [
        {
          id: 'cultural_history',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/成长励志.jpg',
          name: '文化历史'
        },
        {
          id: 'fashion_life',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/时尚生活.jpg',
          name: '时尚生活'
        },
        {
          id: 'literary_fiction',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/文学小说.jpg',
          name: '文学小说'
        },
        {
          id: 'tourism_geography',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/旅游地理.jpg',
          name: '旅游地理'
        },
        {
          id: 'natural_science',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/自然科学.jpg',
          name: '自然科学'
        },
        {
          id: 'improvement_growth',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/成长励志.jpg',
          name: '成长励志'
        },
        {
          id: 'sports_health',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/体育保健.jpg',
          name: '体育保健'
        },
        {
          id: 'financial_technology',
          url: process.env.VUE_APP_BASE_DEV + '/static/web/金融科技.jpg',
          name: '金融科技'
        }
      ]
    }
  },
  methods: {
    // 前往搜索界面
    onToSearchPage() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    // 前往登录界面
    toLoginPage() {
      const that = this
      uni.navigateTo({
        url: '/pages/login/login',
        success() {
          that.$store.commit(`user/${UserTypes.SET_REDIRECT}`, '/pages/index/index')
        }
      })
    },
    // 加载更多
    scrollLower() {}
  }
})
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  font-family: 'aliregular';
  color: #fff;
  background-color: $uni-bg-color-grey-2;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vw;
    border-bottom: 2rpx solid $uni-border-light-color;
    padding: 13rpx 20rpx;
    background-color: $uni-text-color-inverse;

    .title {
      font-size: 28rpx;
      color: $uni-theme-color;
      font-weight: 700;
      padding-right: 20rpx;
    }

    .search {
      flex: 1;
    }
    ::v-deep .uni-searchbar {
      padding: 0;
      padding-right: 10rpx;

      .uni-searchbar__box {
        justify-content: flex-start;
        padding: 0;
        height: 60rpx;
      }
    }
    button[type='primary'] {
      background-color: $uni-theme-color;
      border-radius: 999rpx;
    }
  }
  .scroll {
    height: calc(100vh - 88rpx);
  }

  .banner {
    .swiper-item {
      height: 100%;
      width: 100%;
    }
    .swiper-pic {
      width: 100%;
      height: 100%;
    }
  }

  .category-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #fff;

    .category-item {
      width: calc(25% - 15rpx);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 0 0 12rpx 12rpx;
      overflow: hidden;
      position: relative;
      padding-bottom: 60rpx;
      background-color: $uni-theme-2-color;

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3),
      &:nth-of-type(4) {
        margin-bottom: 15rpx;
      }

      .category-title {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 60rpx;
        width: 100%;
        text-align: center;
        line-height: 60rpx;
        font-size: 24rpx;
        background-color: $uni-theme-4-color;
      }

      .category-pic {
        max-height: 190rpx;
        width: 100%;

        .category-img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }

  .recommend-content {
    margin-top: 20rpx;

    .recommend-title {
      font-size: 36rpx;
      padding: 20rpx;
      font-weight: 700;
      color: $uni-theme-color;
      background-color: $uni-text-color-inverse;
    }
    .recommend-product {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
    }
    .product-left-list,
    .product-right-list {
      flex-wrap: wrap;
      display: flex;
      width: calc(50% - 10rpx);

      .product-item {
        width: 100%;
        color: #000;
        padding: 10rpx;
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 20rpx;

        image {
          width: 100%;
        }
      }
    }
  }
}
</style>
